<template>
    <el-dialog
    :visible.sync="isShowDialog"
    :open="openDialog"
    :close="handleClose"
    :title="isFlag?'新增':'编辑'"
    width="50%"
    :close-on-click-modal="false">
        <el-form
            ref="environmentRef"
            :model="environmentForm"
            label-width="100px"
            :rules="rules">
            <el-form-item label="环境代码" prop="code">
                <el-input v-model="environmentForm.code" placeholder="请输入环境代码" clearable></el-input>
            </el-form-item>
            <el-form-item label="环境名称" prop="name">
                <el-input v-model="environmentForm.name" placeholder="请输入环境名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="系统信息" prop="sysIds">
                <el-select v-model="environmentForm.sysIds" multiple placeholder="请选择系统信息" style="width: 100%;">
                    <el-option
                        v-for="(item, index) in sysInfoList"
                        :key="index"
                        :label="item.sysName"
                        :value="item.rowId"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="environmentForm.remark" placeholder="请输入备注" clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
/**
* @description: 系统环境信息新增编辑
* @create: 2020-09-01
* @author: niuwenli
*/
export default {
    name: 'environmentOperate',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        // 新增还是编辑
        flag: {
            type: Boolean,
            default: false
        },
        // 编辑数据
        updateData: {
            type: Object,
            default: () => {}
        }
    },
    components: {},
    data () {
        return {
            environmentForm: {
                code: '',
                name: '',
                sysIds: [],
                remark: ''
            },
            // 类型
            sysIdsOptions: [
                {
                    label: '1',
                    value: 1
                },
                {
                    label: '2',
                    value: 2
                },
                {
                    label: '3',
                    value: 3
                },
                {
                    label: '4',
                    value: 4
                }
            ],
            rules: {
                code: [{ required: true, message: '请输入环境代码',  trigger: 'blur' }],
                name: [{ required: true, message: '请输入环境名称',  trigger: 'blur' }],
                sysIds: [{ required: true, message: '请选择系统信息',  trigger: 'change' }]
            },
            isShowDialog: false,
            isFlag: false,
            url: '',
            method: '',
            // 系统信息数据
            sysInfoList: []
        };
    },
    created () {
        this.querySysInfoList();
    },
    watch: {
        value (val) {
            this.isShowDialog = val;
        },
        flag (val) {
            this.isFlag = val;
        },
        updateData (val) {
            if (val) {
                this.environmentForm = val;
                if (val.sysIds.indexOf(',') > -1) {
                    this.environmentForm.sysIds = JSON.parse(val.sysIds);
                } else {
                    this.environmentForm.sysIds = [val.sysIds];
                }
            }
        }
    },
    methods: {
        openDialog () {},
        handleClose () {
            this.$emit('input', false);
            this.$refs.environmentRef.resetFields();
            this.environmentForm = {
                code: '',
                name: '',
                sysIds: '',
                remark: ''
            };
        },
        handleConfirm () {
            this.$refs.environmentRef.validate(valid => {
                if (!valid) return;
                this.environmentForm.sysIds = this.environmentForm.sysIds.toString();
                if (this.isFlag) {
                    // 新增
                    this.url = `${this.baseUrl}sys_environment`;
                    this.method = 'post';
                } else {
                    // 编辑
                    this.url = `${this.baseUrl}sys_environment/${this.environmentForm.rowId}`;
                    this.method = 'put';
                }
                this.$axios({
                    url: this.url,
                    method: this.method,
                    data: this.environmentForm
                }).then(res => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.$emit('success');
                    this.handleClose();
                });
            });
        },
        // 查询系统信息名称
        querySysInfoList () {
            this.$axios.get(`${this.baseUrl}sys_info`).then(res => {
                this.sysInfoList = res.data.data;
            }).catch(() => {});
        }
    }
};
</script>
<style>

</style>